JavaScripti iteraatoriabilised ja paralleeltöötlus: sügavuti ülevaade samaaegsest voo töötlemisest

Pidevalt arenevas veebiarenduse maailmas ei ole jõudlus pelgalt funktsioon, vaid fundamentaalne nõue. Kuna rakendused töötlevad üha suuremaid andmehulki ja keerukamaid operatsioone, võib JavaScripti traditsiooniline, järjestikune olemus muutuda oluliseks kitsaskohaks. Alates tuhandete kirjete pärimisest API-st kuni suurte failide töötlemiseni on võime teostada ülesandeid samaaegselt ülioluline.

Siin tuleb mängu Iteraatori abiliste (Iterator Helpers) ettepanek, TC39 3. etapi ettepanek, mis on valmis revolutsiooniliselt muutma seda, kuidas arendajad JavaScriptis itereeritavate andmetega töötavad. Kuigi selle peamine eesmärk on pakkuda rikkalikku, aheldatavat API-d iteraatoritele (sarnaselt sellele, mida `Array.prototype` pakub massiividele), avab selle sünergia asünkroonsete operatsioonidega uue horisondi: elegantne, tõhus ja natiivne samaaegne voo töötlemine.

See artikkel juhatab teid läbi paralleeltöötluse paradigma, kasutades asünkroonseid iteraatoriabilisi. Uurime 'miks', 'kuidas' ja 'mis edasi saab', pakkudes teile teadmisi, kuidas ehitada kaasaegses JavaScriptis kiiremaid ja vastupidavamaid andmetöötlustorustikke.

Kitsaskoht: iteratsiooni järjestikune olemus

Enne kui sukeldume lahendusse, määratleme kindlalt probleemi. Kujutage ette tavalist stsenaariumi: teil on nimekiri kasutajate ID-dest ja iga ID jaoks peate API-st pärima üksikasjalikud kasutajaandmed.

Traditsiooniline lähenemine, kasutades `for...of` tsüklit koos `async/await`-iga, näeb välja puhas ja loetav, kuid sellel on varjatud jõudlusviga.

            
async function fetchUserDetailsSequentially(userIds) {
  const userDetails = [];
  console.time("Sequential Fetch");

  for (const id of userIds) {
    // Iga 'await' peatab kogu tsükli, kuni promise laheneb.
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    userDetails.push(user);
    console.log(`Fetched user ${id}`);
  }

  console.timeEnd("Sequential Fetch");
  return userDetails;
}

const ids = [1, 2, 3, 4, 5];
// Kui iga API-kutse võtab 1 sekundi, võtab kogu see funktsioon aega ~5 sekundit.
fetchUserDetailsSequentially(ids);

            

              
                Copy
              
            
          

Selles koodis blokeerib iga `await` tsükli sees edasise täitmise, kuni see konkreetne võrgupäring on lõpule viidud. Kui teil on 100 ID-d ja iga päring võtab aega 500 ms, on koguaeg vapustavad 50 sekundit! See on väga ebaefektiivne, sest operatsioonid ei sõltu üksteisest; kasutaja 2 andmete pärimine ei nõua, et kasutaja 1 andmed oleksid enne olemas.

Klassikaline lahendus: `Promise.all`

Selle probleemi väljakujunenud lahendus on `Promise.all`. See võimaldab meil käivitada kõik asünkroonsed operatsioonid korraga ja oodata, kuni need kõik on lõpule viidud.

            
async function fetchUserDetailsWithPromiseAll(userIds) {
  console.time("Promise.all Fetch");

  const promises = userIds.map(id => 
    fetch(`https://api.example.com/users/${id}`).then(res => res.json())
  );

  // Kõik päringud käivitatakse samaaegselt.
  const userDetails = await Promise.all(promises);

  console.timeEnd("Promise.all Fetch");
  return userDetails;
}

// Kui iga API-kutse võtab 1 sekundi, võtab see nüüd aega vaid ~1 sekundi (kõige pikema päringu aeg).
fetchUserDetailsWithPromiseAll(ids);

            

              
                Copy
              
            
          

`Promise.all` on tohutu edasiminek. Siiski on sellel oma piirangud:

• Mälukasutus: See nõuab kõigi lubaduste (promise'ide) massiivi loomist ette ja hoiab kõiki tulemusi mälus enne tagastamist. See on problemaatiline väga suurte või lõpmatute andmevoogude puhul.
• Tagasisurve kontrolli puudumine: See käivitab kõik päringud samaaegselt. Kui teil on 10 000 ID-d, võite üle koormata oma süsteemi, serveri päringute piiranguid või võrguühendust. Puudub sisseehitatud viis samaaegsuse piiramiseks näiteks 10 päringule korraga.
• "Kõik või mitte midagi" veakäsitlus: Kui üksainus lubadus (promise) massiivis lükatakse tagasi, lükkab `Promise.all` kohe tagasi, hüljates kõigi teiste edukate lubaduste tulemused.

Just siin tuleb esile asünkroonsete iteraatorite ja pakutud abiliste tõeline jõud. Need võimaldavad voopõhist töötlemist peeneteralise kontrolliga samaaegsuse üle.

Asünkroonsete iteraatorite mõistmine

Enne kui saame joosta, peame kõndima. Kordame lühidalt üle asünkroonsed iteraatorid. Kui tavalise iteraatori `.next()` meetod tagastab objekti nagu `{ value: 'some_value', done: false }`, siis asünkroonse iteraatori `.next()` meetod tagastab Promise'i, mis laheneb selleks objektiks.

See võimaldab meil itereerida üle andmete, mis saabuvad aja jooksul, näiteks failivoo tükid, lehekülgedeks jaotatud API tulemused või sündmused WebSocketist.

Asünkroonsete iteraatorite tarbimiseks kasutame `for await...of` tsüklit:

            
// Generaatorfunktsioon, mis väljastab väärtuse iga sekundi järel.
async function* createSlowStream() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

async function consumeStream() {
  const stream = createSlowStream();
  // Tsükkel peatub iga 'await' juures, oodates järgmise väärtuse väljastamist.
  for await (const value of stream) {
    console.log(`Received: ${value}`); // Logib 1, 2, 3, 4, 5, ühe sekundis
  }
}

consumeStream();

            

              
                Copy
              
            
          

Mängumuutja: Iteraatori abiliste ettepanek

TC39 iteraatori abiliste ettepanek lisab tuttavad meetodid nagu `.map()`, `.filter()` ja `.take()` otse kõikidele iteraatoritele (nii sünkroonsetele kui ka asünkroonsetele) `Iterator.prototype` ja `AsyncIterator.prototype` kaudu. See võimaldab meil luua võimsaid, deklaratiivseid andmetöötlustorustikke, ilma et peaksime iteraatorit esmalt massiiviks teisendama.

Kujutage ette asünkroonset andurite näitude voogu. Asünkroonsete iteraatori abilistega saame seda töödelda nii:

            
async function processSensorData() {
  const sensorStream = getAsyncSensorReadings(); // Tagastab asünkroonse iteraatori

  // Hüpoteetiline tulevane süntaks natiivsete asünkroonsete iteraatori abilistega
  const processedStream = sensorStream
    .filter(reading => reading.temperature > 30) // Filtreeri kõrgete temperatuuride jaoks
    .map(reading => ({ ...reading, temperature: toFahrenheit(reading.temperature) })) // Teisenda Fahrenheitiks
    .take(10); // Võta ainult esimesed 10 kriitilist näitu

  for await (const criticalReading of processedStream) {
    await sendAlert(criticalReading);
  }
}

            

              
                Copy
              
            
          

See on elegantne, mälusäästlik (töötleb ühte elementi korraga) ja väga loetav. Kuid standardne `.map()` abiline, isegi asünkroonsete iteraatorite puhul, on endiselt järjestikune. Iga kaardistamisoperatsioon peab lõppema enne, kui järgmine saab alata.

Puuduv lüli: samaaegne kaardistamine

Tõeline jõud jõudluse optimeerimiseks tuleneb samaaegse kaardistamise ideest. Mis siis, kui `.map()` operatsioon saaks alustada järgmise elemendi töötlemist, samal ajal kui eelmist veel oodatakse? See on paralleeltöötluse tuum iteraatori abilistega.

Kuigi `mapConcurrent` abiline ei ole ametlikult praeguse ettepaneku osa, võimaldavad asünkroonsete iteraatorite pakutavad ehitusplokid meil seda mustrit ise rakendada. Selle ehitamise mõistmine annab sügava sissevaate kaasaegsesse JavaScripti samaaegsusesse.

Samaaegse `map` abilise ehitamine

Disainime oma `asyncMapConcurrent` abilise. See on asünkroonne generaatorfunktsioon, mis võtab sisendiks asünkroonse iteraatori, kaardistamisfunktsiooni ja samaaegsuse piirangu.

Meie eesmärgid on:

1. Töödelda mitut elementi lähteiteraatorist paralleelselt.
2. Piirata samaaegsete operatsioonide arvu määratud tasemele (nt 10 korraga).
3. Väljastada tulemused algses järjekorras, nagu need esinesid lähtevoos.
4. Käsitleda tagasisurvet loomulikult: ärge tõmmake elemente allikast kiiremini, kui neid suudetakse töödelda ja tarbida.

Rakendusstrateegia

Haldame aktiivsete ülesannete kogumit. Kui ülesanne lõpeb, alustame uut, tagades, et aktiivsete ülesannete arv ei ületa kunagi meie samaaegsuse piirangut. Salvestame ootel olevad lubadused (promise'id) massiivi ja kasutame `Promise.race()`, et teada saada, millal järgmine ülesanne on lõppenud, mis võimaldab meil selle tulemuse väljastada ja selle asendada.

            
/**
 * Töötleb asünkroonse iteraatori elemente paralleelselt samaaegsuse piiranguga.
 * @param {AsyncIterable} source Lähte asünkroonne iteraator.
 * @param {(item: T) => Promise} mapper Asünkroonne funktsioon, mida rakendada igale elemendile.
 * @param {number} concurrency Paralleelsete operatsioonide maksimaalne arv.
 * @returns {AsyncGenerator}
 */
async function* asyncMapConcurrent(source, mapper, concurrency) {
  const executing = []; // Hetkel täitmisel olevate lubaduste (promise'ide) kogum
  const iterator = source[Symbol.asyncIterator]();

  async function processNext() {
    const { value, done } = await iterator.next();
    if (done) {
      return; // Rohkem elemente töötlemiseks pole
    }
    
    // Alusta kaardistamisoperatsiooni ja lisa promise kogumisse
    const promise = Promise.resolve(mapper(value)).then(mappedValue => ({ 
        result: mappedValue,
        sourceValue: value
    }));

    executing.push(promise);
  }

  // Täida kogum esialgsete ülesannetega kuni samaaegsuse piiranguni
  for (let i = 0; i < concurrency; i++) {
    processNext();
  }

  while (executing.length > 0) {
    // Oota, kuni mõni täitmisel olev promise laheneb
    const finishedPromise = await Promise.race(executing);

    // Leia indeks ja eemalda lõpetatud promise kogumist
    const index = executing.indexOf(finishedPromise);
    executing.splice(index, 1);

    const { result } = await finishedPromise;
    yield result;

    // Kuna vabanenud on koht, alusta uut ülesannet, kui on veel elemente
    processNext();
  }
}

            

              
                Copy
              
            
          

            
// Abifunktsioon API-kutse simuleerimiseks juhusliku viivitusega
function fetchUser(id) {
  const delay = Math.random() * 1000 + 500; // 500ms - 1500ms viivitus
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Resolved fetch for user ${id}`);
      resolve({ id, name: `User ${id}`, fetchedAt: Date.now() });
    }, delay);
  });
}

// Asünkroonne generaator ID-de voo loomiseks
async function* createIdStream() {
  for (let i = 1; i <= 20; i++) {
    yield i;
  }
}

async function main() {
  const idStream = createIdStream();
  const concurrency = 5; // Töötle 5 päringut korraga

  console.time("Concurrent Stream Processing");

  const userStream = asyncMapConcurrent(idStream, fetchUser, concurrency);

  // Tarbi tulemuseks olev voog
  for await (const user of userStream) {
    console.log(`Processed and received:`, user);
  }

  console.timeEnd("Concurrent Stream Processing");
}

main();

            

              
                Copy